<style include="settings-shared md-select">
  .custom-button-container {
    float: right;
  }

  .input-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .advanced-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }


  .custom-body {
    padding-bottom: 20px;
  }

  #advancedToggle {
    --ink-color: var(--cros-text-color-primary);
    align-items: center;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--cros-text-color-primary);
    display: flex;
    font-weight: 400;
    margin-bottom: 3px;
    margin-top: 12px;
    min-height: 32px;
    padding: 0 12px;
  }

  #toggleContainer {
    align-items: center;
    color: var(--cros-text-color-primary);
    display: flex;
    float: left;
    font: inherit;
    justify-content: center;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
  }

  #toggleSpacer {
    padding-top: 3px;
  }

  iron-icon {
    margin-inline-start: 16px;
  }
</style>
<cr-dialog id="dialog" close-text="$i18n{close}">
  <div slot="title">$i18n{crostiniExtraContainersCreateDialogTitle}</div>
  <div slot="body">
    <div class="input-container">
      <cr-input id="containerNameInput"
          label="$i18n{crostiniExtraContainersContainerNameLabel}"
          maxlength="50"
          aria-disabled="false">
      </cr-input>
      <cr-input id="vmNameInput"
          label="$i18n{crostiniExtraContainersVmNameLabel}"
          maxlength="50"
          aria-disabled="false">
      </cr-input>
    </div>

    <div id="toggleSpacer"></div>

    <div id="toggleContainer">
      <cr-button id="advancedToggle" on-click="advancedToggleClicked_"
          aria-expanded$="[[boolToString_(advancedToggleExpanded_)]]">
        <span>$i18n{advancedPageTitle}</span>
        <iron-icon icon="[[getArrowIcon_(advancedToggleExpanded_)]]">
        </iron-icon>
      </cr-button>
    </div>
    <div class="advanced-container" hidden="[[!advancedToggleExpanded_]]">
      <cr-input id="imageServerInput"
        label="$i18n{crostiniExtraContainersCreateDialogImageServer}"
        aria-disabled="false">
      </cr-input>
      <cr-input id="imageAliasInput"
        label="$i18n{crostiniExtraContainersCreateDialogImageAlias}"
        aria-disabled="false">
      </cr-input>
    </div>
  </div>

  <div slot="body" class="custom-body">
    <div slot="button-container" class="custom-button-container">
      <cr-button id="cancel" class="cancel-button" on-click="onCancelTap_">
        $i18n{cancel}
      </cr-button>
      <cr-button id="create" class="action-button" on-click="onCreateTap_">
        $i18n{crostiniExtraContainersCreate}
      </cr-button>
    </div>
  </div>
</cr-dialog>
